<template>
  <ep-modal :title="title" v-model="show" width="600px" @close="closeModal">
    <ep-form ref="form" class="form-container" :form="formData" :rules="rules" name-width="100px" name-position="top" size="normal">
      <ep-form-item label="问卷名称" attr="name" required>
        <ep-input v-model="formData.name" name="name"></ep-input>
      </ep-form-item>

      <ep-form-item label="负责人" attr="member" required>
        <ep-select placeholder="请选择" v-model="formData.member" filterable>
          <ep-select-item v-for="item in selectArr" :key="item.value" :index="item.value" :label="item.name"></ep-select-item>
        </ep-select>
      </ep-form-item>

      <ep-form-item label="开始时间" attr="time" required>
        <ep-date v-model="formData.time"></ep-date>
      </ep-form-item>
      <ep-form-item label="问卷简介" attr="intro" required>
        <ep-input v-model="formData.intro" name="intro" type="textarea" :maxlength="300"></ep-input>
      </ep-form-item>
      <ep-form-item>
        <ep-button type="primary" size="normal" @click="submit('form')">提交</ep-button>
        <ep-button type="warning" size="normal" @click="resetForm('form')">重置</ep-button>
      </ep-form-item>
    </ep-form>
  </ep-modal>
</template>

<script>
export default {
  name: 'info',
  props: {
    isShow: Boolean,
    title: String
  },
  data() {
    return {
      formData: {
        name: '',
        member: '',
        time: '',
        intro: ''
      },
      selectArr: [
        { value: '1', name: 'echo' },
        { value: '2', name: '小鱼' },
        { value: '3', name: '斯迪文' },
        { value: '4', name: '中小火' }
      ],
      rules: {
        name: { required: true, message: '请输入', trigger: 'change' },
        member: { required: true, message: '请选择', trigger: 'change' },
        time: { required: true, message: '请选择', trigger: 'change' },
        intro: { required: true, message: '请输入', trigger: 'change' }
      },
      show: false
    }
  },
  methods: {
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$pop({
            type: 'success',
            message: '验证通过！'
          })
          this.closeModal()
        }
      })
    },
    resetForm() {
      this.$refs.form.reset()
    },
    closeModal() {
      this.$emit('closeInfo', false)
    }
  },
  watch: {
    isShow(newValue) {
      this.show = newValue
    }
  }
}
</script>
<style lang="less" scoped>
.form-container {
  width: 400px;
  margin: 0 auto;
  .ep-form--item {
    margin-bottom: 15px;
    .ep-button {
      float: right;
      margin-left: 16px;
    }
  }
}
</style>
